<template>
  <div class="app-container">
    <el-col :span="16">
      <el-row>
        <el-button type="primary" @click="addQuestions()">新增</el-button>
        <el-button type="success">高级搜索</el-button>
      </el-row>
    </el-col>
    <el-col :span="8">
      <el-input v-model="ipt" placeholder="请输入内容">
        <el-button
          @click="sear"
          slot="append"
          icon="el-icon-search"
        ></el-button>
      </el-input>
    </el-col>
    <el-table
      :data="examlist"
      border
      style="width: 100%; margin-top: 55px"
      max-height="350"
    >
      <el-table-column
        label="#"
        type="index"
        align="center"
        width="60"
      ></el-table-column>
      <el-table-column prop="title" label="题目" align="center" width="300">
      </el-table-column>
      <el-table-column prop="author" label="发布者" align="center" width="120">
      </el-table-column>
      <el-table-column prop="type" label="类型" align="center" width="120">
      </el-table-column>
      <el-table-column
        prop="created"
        label="时间"
        align="center"
        sortable
      ></el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="220">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="look(scope.row)"
            >详情</el-button
          >
          <el-button type="danger" size="small" @click="delExam(scope.row.id)">
            删除
          </el-button>
          <el-button
            type="warning"
            size="small"
            @click="updateQuestion(scope.row)"
          >
            修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3, 5, 8, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <el-drawer
        class="drawer-el"
        size="80%"
        :visible.sync="drawer"
        :with-header="true"
      >
        <span>
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="标题">
              <el-input :disabled="see" v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="类别" prop="type">
              <el-select :disabled="see" v-model="form.cid" placeholder="请选择类别">
                <el-option
                  v-for="(item, index) in classify"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选项">
              <el-row
                style="margin-top: 10px"
                v-for="(item, index) in option"
                :key="index"
              >
                <el-col :span="2">
                  <el-checkbox :disabled="see" v-model="item.checked"></el-checkbox>
                  {{ item.index }}
                </el-col>
                <el-col :span="17">
                  <el-input
                   :disabled="see"
                    type="textarea"
                    class="one-content"
                    v-model="item.value"
                  ></el-input>
                </el-col>
                <el-col :span="5">
                  <el-button
                   :disabled="see"
                    type="primary"
                    icon="el-icon-plus"
                    v-if="index == option.length - 1"
                    @click="addOption(index)"
                    class="el-btn"
                  ></el-button>
                  <el-button
                    type="danger"
                    icon="el-icon-minus"
                    :disabled="flag"
                    v-if="index >= 4"
                    @click="removeOption(index)"
                  ></el-button>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="答案" style="background-color: '#ccc;'">{{
              answers.join(",") || "暂无"
            }}</el-form-item>
            <el-form-item label="答案提示">
              <el-input :disabled="see" v-model="form.tips"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button :disabled="see" type="primary" @click="onSubmit()">确定</el-button>
              <el-button @click="drawer=false">取消</el-button>
            </el-form-item>
          </el-form>
        </span>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      ipt: "",
      form: {},
      drawer: false,
      flag: false,
      flags: false,
      answers: [],
      option: [
        { index: "A", value: "", checked: false },
        { index: "B", value: "", checked: false },
        { index: "C", value: "", checked: false },
        { index: "D", value: "", checked: false },
      ],
      see: false,
    };
  },
  computed: {
    ...mapState("exam", ["examlist", "pageSize", "currentPage", "total"]),
    ...mapState("msbd", ["classify"]),
  },
  methods: {
    async sear() {
      await this.getExam({ ipt: this.ipt });
    },
    delExam(sid) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.delQuestions({ id: sid });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    look(row) {
      console.log(row);
      this.drawer = true;
      this.form = row;
      this.option = JSON.parse(row.options);
      this.answer = JSON.parse(row.answers);
       this.see = true;
    },
    updateQuestion(row) {
      this.see = false;
      this.drawer = true;
      this.form = row;
      this.option = JSON.parse(row.options);
      this.answer = JSON.parse(row.answers);
    },
    async onSubmit() {
      // console.log(this.form.id)
      if (this.form.id) {
        await this.updateQuestions({
         ...this.form,
          uid: 1,
          option: JSON.stringify(this.option),
          answers: JSON.stringify(this.answers),
        });
        // console.log(JSON.stringify(this.form))
      } else {
        await this.postExam({
          ...this.form,
          uid: 1,
          options: JSON.stringify(this.option),
          answers: JSON.stringify(this.answers),
        });
      }
      this.getExam({ ipt: this.ipt }), (this.drawer = false);
    },
    handleCurrentChange(val) {
      this.SET_CURRENT(val);
      this.getExam({ ipt: this.ipt });
    },
    handleSizeChange(val) {d
      this.SET_PAGESIZE(val);
      this.getExam({ ipt: this.ipt });
    },
    ...mapActions("exam", [
      "getExam",
      "postExam",
      "updateQuestions",
      "delQuestions",
    ]),
    ...mapActions("msbd", ["getClassify"]),
    ...mapMutations("exam", ["SET_CURRENT", "SET_PAGESIZE"]),
    addQuestions() {
      this.see = false;
      this.drawer = true;
      this.form = {};
      this.option.map((item) => {
        (item.checked = false), (item.value = "");
        // console.log(item)
      }),
        (this.answers = []);
    },
    //form表单新增选项
    addOption(index) {
      this.option.push({
        index: String.fromCharCode(index + 65),
        value: "",
        checked: false,
      });
      if (this.option.length > 1) {
        this.flag = false;
      }
    },
    //form表单删除选项
    removeOption(index) {
      this.option.splice(index, 1);
      if (this.option.length == 1) {
        this.flag = true;
      }
    },
  },
  mounted() {
    this.getExam({ ipt: this.ipt }), this.egtClassify();
  },
  watch: {
    option: {
      deep: true,
      handler: function (newQuestion, oldQuestion) {
        this.answers = [];
        newQuestion.map((value, index) => {
          this.option[index]["index"] = String.fromCharCode(index + 65);
          // console.log(value)
          value.checked && this.answers.push(value.index);
          // console.log(value.checked)
        });
      },
    },
  },
};
</script>

<style>
.drawer-el .el-drawer.rtl {
  overflow: hidden;
  overflow-y: auto;
}

.el-drawer__header > :first-child {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  outline: none;
}

.el-col-17 {
    width: 66%;
}

.el-col-5 {
    width: 21%;
    margin-top: 10px;
    margin-left: 10px;
}
</style>